import { defineComponent, ref, watch, onMounted } from "vue";
import "./index.less";
import Field from "@/components/Field";
import { Button, DatePicker, Picker, Popup } from "vant";
import { IFormItem, IFormTypeData } from "../../types";
import { getSize } from "@/command/apiTool";
import ButtonGroupView from "@/components/ButtonGroupView";
import RowView from "@/components/RowView";
import moment from "moment";
import { IFormTimePicker } from "./types";
export default defineComponent({
  name: "select-view",
  props: {
    modelValue: {
      type: Array,
      default: "",
    },
    item: {
      type: Object as () => IFormItem & IFormTimePicker,
      default: () => {
        return {};
      },
    },
    typeData: {
      type: Array as () => IFormTypeData[],
      default: () => [],
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const initSelectData = () => {
      if (Array.isArray(props.modelValue) && props.item.mode != "date") {
        let selectArrOne = props.modelValue[0]
          .split(":")
          .map((e: any) => Number(e));
        let selectArrTwo = props.modelValue[1]
          .split(":")
          .map((e: any) => Number(e));
        selectData.value = [selectArrOne, selectArrTwo];
      }
    };
    const formatArrDateText = (date: any[]) => {
      return date.join("-");
    };
    const formatArrText = (date: any[]) => {
      return date.map(getTimeText).toString().split(",").join(":");
    };
    const getTimeText = (data: any) => {
      if (String(data).length == 1) {
        return "0" + data;
      } else {
        return data;
      }
    };

    const getCurrentTime = () => {
      return moment();
    };
    const formatTime = (date: moment.Moment) => {
      return date.format("HH:mm");
    };

    const getInit = (): any => {
      if (props.item.mode == "date") {
        return getCurrentTime().format("YYYY-MM-DD").split("-");
      } else {
        return formatTime(getCurrentTime())
          .split(":")
          .map((e) => parseInt(e));
      }
    };

    const initData = getInit();
    const showModal = ref(false);
    const selectIndex = ref(0);
    const selectData = ref([initData, initData]);

    return () => {
      const renderHeader = () => {
        const data = [
          {
            name: "开始时间",
            value: formatArrText(selectData.value[0]),
          },
          {
            name: "结束时间",
            value: formatArrText(selectData.value[1]),
          },
        ];
        return (
          <div
            class="h-[70px] flex items-center"
            style={{ borderBottom: "1px solid #F5F5F5" }}
          >
            {data.map((e, i) => {
              return (
                <div
                  class="flex flex-col flex-1 justify-center items-center"
                  onClick={() => (selectIndex.value = i)}
                >
                  <div
                    class="text-[14px]"
                    style={{
                      color: selectIndex.value == i ? "#4485FF" : "#999999",
                    }}
                  >
                    {e.name}
                  </div>
                  <div
                    class="text-[14px]"
                    style={{
                      color: selectIndex.value == i ? "#666666" : "#999999",
                    }}
                  >
                    {e.value}
                  </div>
                </div>
              );
            })}
          </div>
        );
      };
      const onReset = () => {
        selectData.value = [initData, initData];
        // showModal.value = false;
      };
      const onComfirm = () => {
        if (props.item.mode == "date") {
          emit(
            "change",
            selectData.value.map((e) => formatArrDateText(e))
          );
        } else {
          emit(
            "change",
            selectData.value.map((e) => formatArrText(e))
          );
        }
        showModal.value = false;
      };
      const renderButton = () => {
        return (
          <RowView
            class="h-[73px] justify-center"
            style={{ borderTop: "1px solid #F5F5F5" }}
          >
            <Button
              class="w-[170px] h-[44px] !mr-[10px]"
              round
              onClick={onReset}
            >
              重置
            </Button>
            <Button
              class="w-[170px] h-[44px]"
              round
              style={{
                color: "white",
                background: "linear-gradient(90deg, #66D0FF 0%, #3893FF 100%)",
              }}
              onClick={onComfirm}
            >
              确认
            </Button>
          </RowView>
        );
      };
      const renderBody = () => {
        const columns = [
          // 第一列
          [
            ...Array(24)
              .fill({})
              .map((e, i) => ({ text: getTimeText(i), value: i })),
          ],
          // 第二列
          [
            ...Array(60)
              .fill({})
              .map((e, i) => ({ text: getTimeText(i), value: i })),
          ],
        ];

        return (
          <Picker
            v-model={selectData.value[selectIndex.value]}
            showToolbar={false}
            onConfirm={(data) => {
              emit("change", data.selectedValues[0]);
              showModal.value = false;
            }}
            onCancel={() => (showModal.value = false)}
            columns={columns}
          />
        );
      };

      const renderDateHeader = () => {
        const data = [
          {
            name: "开始时间",
            value: formatArrDateText(selectData.value[0]),
          },
          {
            name: "结束时间",
            value: formatArrDateText(selectData.value[1]),
          },
        ];
        return (
          <div
            class="h-[70px] flex items-center"
            style={{ borderBottom: "1px solid #F5F5F5" }}
          >
            {data.map((e, i) => {
              return (
                <div
                  class="flex flex-col flex-1 justify-center items-center"
                  onClick={() => (selectIndex.value = i)}
                >
                  <div
                    class="text-[14px]"
                    style={{
                      color: selectIndex.value == i ? "#4485FF" : "#999999",
                    }}
                  >
                    {e.name}
                  </div>
                  <div
                    class="text-[14px]"
                    style={{
                      color: selectIndex.value == i ? "#666666" : "#999999",
                    }}
                  >
                    {e.value}
                  </div>
                </div>
              );
            })}
          </div>
        );
      };
      const renderDateBody = () => {
        return (
          <DatePicker
            v-model={selectData.value[selectIndex.value]}
            showToolbar={false}
          />
        );
      };
      const renderView = () => {
        if (props.item.mode == "date") {
          return [renderDateHeader(), renderDateBody()];
        } else {
          return [renderHeader(), renderBody()];
        }
      };
      const renderModal = () => {
        return (
          <Popup
            v-model:show={showModal.value}
            round={true}
            position="bottom"
            class="time-picker "
            style={{ padding: getSize(15), paddingTop: 0 }}
          >
            {renderView()}
            {renderButton()}
          </Popup>
        );
      };
      const getValue = () => {
        if (Array.isArray(props.modelValue)) {
          return props.modelValue.join("~");
        } else {
          return "";
        }
      };
      return (
        <div>
          <Field
            name={getValue()}
            onClick={() => {
              showModal.value = true;
              initSelectData();
            }}
            isLink={true}
          />
          {renderModal()}
        </div>
      );
    };
  },
});
